<template>
  <div class="game-container">
    <game-header />
    <game-swipe @change-swipe="handleSwipeChange" :game-list="GAME_LIST" />
    <game-introduce :current-game="currentGame" />
    <div class="game-mask">
      <img :src="currentGame?.cover" class="mask-bg" alt="" />
    </div>

    <div class="game-detail">
      <router-view v-slot="{ Component }">
        <transition name="game">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import gameHeader from "./components/gameHeader.vue";
import gameSwipe from "./components/gameSwipe.vue";
import gameIntroduce from "./components/gameIntroduce.vue";
import { GAME_LIST } from "@/config/config";
import type { IgameItem } from "@/types/gameType";

const currentGame = ref<IgameItem>(GAME_LIST[0]);

const handleSwipeChange = (game: IgameItem) => {
  currentGame.value = game;
};
</script>

<style scoped lang="scss">
.game-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--box-color);
  overflow: hidden;
  .game-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .mask-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 5;
      background: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0.8));
    }
  }
}

.game-enter-active {
  animation: gameChange 0.6s;
}

.game-leave-active {
  animation: gameChange 0.3s reverse;
}

@keyframes gameChange {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
